import React, { useEffect, useState } from "react";
import { createStore } from 'redux';
import ReactDOM from 'react-dom'

const initialState = {
    count: 0
};

function reducer(state = initialState, action) {
    console.log('reducer', state, action);

    switch (action.type) {
        case 'INCREMENT':
            return {
                count: state.count + 1
            };
        case 'DECREMENT':
            return {
                count: state.count - 1
            };
        case 'RESET':
            return {
                count: 0
            };
        default:
            return state;
    }
}

const store = createStore(reducer);
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });
store.dispatch({ type: "RESET" });
console.log(store.getState())

const App = () => (
    <div>
        <Counter />
    </div>
);


class Counter extends React.Component {
    state = { count: 0 }

    increment = () => {
        this.setState({
            count: this.state.count + 1
        });
    }

    decrement = () => {
        this.setState({
            count: this.state.count - 1
        });
    }

    render() {
        return (
            <div>
                <h2>Counter</h2>
                <div>
                    <button onClick={this.decrement}>-</button>
                    <span>{this.state.count}</span>
                    <button onClick={this.increment}>+</button>
                </div>
            </div>
        )
    }
}


ReactDOM.render(
    <div>
        <App />
    </div>,
    document.getElementById('root')

);